<template>
  <div class="title-view">
    <div>
      <div class="name">{{landInfo?.farmLandName}}</div>
        <div class="cropname">稻谷{{landInfo?.cropName}},{{landInfo?.cropSeriesName}}</div>
    </div>
    <div class="right-text">
      <div class="num">{{landInfo?.landArea}}亩</div>
      <div class="count">共计作业<span>{{landInfo.landCount||0}}</span>次</div>
    </div>
  </div>
  <Steps direction="vertical" :active="0">
      <Step>
        <div class="">作业时间:{{formatDate(landInfo?.operationTime)}} {{dateToWeek(landInfo?.operationTime)}}</div>
        <div class="step-view">
            <div class="image-view">
              <Image
                fit="cover"
                width="100%"
                height="100%"
                :src="getImage(landInfo)"
              />
            </div>
            <div class="step-view-right">
              <div class="line-view">
                <div>长势状态</div>
                <div :style="{color: landInfo?.growthColor}">{{landInfo?.growthName}}</div>
              </div>
              <div class="line-view">
                <div>生育时期</div>
                <div>{{landInfo?.shengyuqiName}}</div>
              </div>
              <div class="line-view">
                <div>记录人</div>
                <div>{{landInfo?.createName}}</div>
              </div>
            </div>
        </div>
      </Step>
    </Steps>
    <Button  
       style="margin:10px;"
      icon="more-o"
      size="small"
      @click="btnGo(landInfo)"
      type="success"> 更多</Button>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import {getLandGrowthList} from '@/api/gis'
import { Button,Steps,Step,Image} from 'vant';
import {dateToWeek,formatDate} from '@/utils/format'
const emits = defineEmits(['onClick','onCancel'])
const props = defineProps({ 
  farmLandId:{
    type:String,
    default(){
      return ''
    }
  }
})
const landInfo:any=ref({})
onMounted(async ()=>{
  getLandInfo()
})
const getLandInfo =()=>{
  getLandGrowthList({farmLandId:props.farmLandId,page:1,limit:1}).then((res:any)=>{
      if(res.success){
        landInfo.value = res.data[0]||{}
      }
    })
}
const btnGo = async (item:any) => {
  wx.miniProgram.navigateTo({url:`/farming/records/records?select=0&type=record&farmId=${item.farmId}&landId=${props.farmLandId}`})
};

const getImage=(item:any)=>{
  let listimage= JSON.parse(item.pictures||'[]')||[]
  let obj = listimage.find((m:any)=>m.type=='image')
  if(obj){
    return obj?.url
  }else{
    return ""
  }
}
defineExpose({getLandInfo})

</script>

<style lang="scss" scoped>
.title-view{
  display: flex;
  justify-content:space-between;
  padding:10px 14px 0 14px;

  .name,.num{
    color: #565656;
    font-size:16px;
  }
  .right-text{
    font-size:14px;
    text-align: right;
    .count{
      font-size:14px;
      color: #333;
      span{
        font-size:15px;
        color: #07c160;
      }
    }
  }
  .cropname{
    font-size:14px;
    color: #ff9c00;
  }
}
.step-view{
  display: flex;
  padding-top:10px;
  .image-view{
    height:80px;
    width:80px;
  }
  .step-view-right{
    width:240px;
    padding-left:10px;
    .line-view{
      display: flex;
      justify-content: space-between;
      color:#333;
      font-size:14px;
      padding-bottom:6px;
    }
  }
}
</style>